<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——内容过滤选择器</title>
    <script type="application/javascript" src="../../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        body {font-size:12px;text-align: center;}
        div {width:100px; height:100px;  border:solid 1px #666; display: none}
        span {border: solid 1px #eee ; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <div>ABCD</div>
    <div><span title="aaa">AAAA</span></div>
    <div>EFaH</div>
    <div style="background-color: blue;"></div>
</body>
<script type="application/javascript">
    // 内容过滤选择器：根据元素所包含的文本内容获取元素
    /*包含指定内容的元素(:contains(text))*/
    $("div:contains('A')").css('display','block'); // ABCD AAAA
    /*获取空元素，即不包含子元素或文本的元素(:empty)*/
    $("div:empty").css('display','block');
    /*获取包含与给定选择器的匹配的元素(:has(selector))*/
    $("div:has(span)").css('display','block'); // AAAA
    /*获取含有子元素或文本内容的元素(:parent)*/
    $("div:parent").css('display','block'); // ABCD AAAA EFaH
</script>
</html>